<script type="text/jsx">
export default {
  name: 'VBubbleTip',
  props: {
    content: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'top'
    },
    showLength: {
      type: Number,
      default: 10
    }
  },
  render (h) {
    const s = this.content
    if (!s || typeof s !== 'string') {
      return ''
    }
    if (s.length <= this.showLength) {
      return <span>{s}</span>
    }
    // domPropsInnerHTML: https://github.com/vuejs/babel-plugin-transform-vue-jsx
    return (
      <el-popover placement={this.placement} trigger='hover' width='300'>
        <span
          style='word-wrap:break-word;'
          domPropsInnerHTML={s
            .replace(/<|>/g, (str) => encodeURIComponent(str))
            .replace(/\n/g, '<br/>')}
        />
        <span slot='reference'>{s.slice(0, this.showLength) + '…'}</span>
      </el-popover>
    )
  }
}
</script>
